<!--
 * @Author: leiming
 * @Date: 2022-10-11 16:54:25
 * @LastEditors: leiming
 * @LastEditTime: 2022-10-31 00:22:13
 * @Description: file content
-->
<template>
    <el-drawer :title="attrs.title" :model-value="modelValue" :size="670" @closed="handleClose">
        <CorrelationIdeas
            v-if="modelValue"
            ref="formRef"
            class="correlation-ideas"
            :is-edit="true"
            :plan-id="planDetail.planId"
            :ideas-id="planDetail.creativeId"
        />
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="handleClose">取消</el-button>
                <el-button :loading="loadingButton" type="primary" @click="submit">确认</el-button>
            </span>
        </template>
    </el-drawer>
</template>

<script setup lang="ts">
import { ref, defineProps, defineEmits, useAttrs } from 'vue';
import CorrelationIdeas from './correlationIdeas.vue';
import { ElMessage } from 'element-plus';

const attrs = useAttrs();
const formRef = ref(null);
const loadingButton = ref(false);
const emits = defineEmits<{(e: 'update:modelValue', visible: boolean): void; (e: 'success'): void }>();
const type = ref(null);
const textarea = ref<object | null>(null);
const props = defineProps({
    modelValue: {
        type: Boolean,
        default: false,
    },
    planDetail: {
        type: Object,
        default: () => null,
    },
});

const handleClose = () => {
    emits('update:modelValue', false);
};

const submit = async () => {
    loadingButton.value = true;
    try {
        const res = await formRef.value.handleSubmit();
        if (res) {
            handleClose();
            ElMessage.success('提交成功');
            emits('success');
        }
    } finally {
        loadingButton.value = false;
    }
};
</script>

<style lang="scss" scoped>
.btn-group {
    text-align: center;
    .el-button {
        display: inline-block;
        width: 270px;
        height: 55px;
        & + .el-button {
            margin: 15px 0 0;
        }
    }
}
</style>
